<html>

	<head>
		<meta charset="UTF-8" />
		<title>俄罗斯方块</title>
		<style>
			#box {
				border: 1px solid #999;
				border-collapse: collapse;
				margin: 0px;
				padding: 0px;
			}
			
			#box td {
				border: 1px solid #999;
				width: 19px;
				height: 19px;
			}
		</style>
	</head>
	<script>
	</script>

	<body>
		<table id="box">

		</table>
		<script src="step1.js">
			/*创建格式的JS代码*/
		</script>
		<script>
			//生产方块形状, 有7种基本形状. 
			var activeBlock = null,
				timer = null;

			//创建活动小方块
			function createBlock() {
				//生成一个0到6之间随机数 
				var t = Math.floor(Math.random() * 7);
				//7中图形，每种4个方块，每个方块水平和垂直坐标共8个坐标
				//以下坐标2个一对(0,4)代表第一个方块所处的格子为(第一行，第五列)
				var arr7 = "0,4,1,4,0,5,1,5;0,3,0,4,0,5,0,6;0,5,1,4,1,5,2,4;0,4,0,5,1,5,1,6;0,4,1,4,2,4,2,5;0,5,1,5,2,4,2,5;0,5,1,4,1,5,1,6"
				var arr = arr7.split(";")
				activeBlock = arr[t].split(","); //当前活动块（7个中的一个）
				for(var i = 0; i < 8; i++) {
					activeBlock[i] = parseInt(activeBlock[i]); //把字符串值改成数值
				}
			}
			createBlock();

			//绘制图形
			function paint() {
				for(var i = 0; i < 4; i++) {
					box.rows[activeBlock[i * 2]].cells[activeBlock[i * 2 + 1]].style.backgroundColor = "red";
				}
			}
			//擦除当前图形
			function ease() {
				for(var i = 0; i < 4; i++) {
					box.rows[activeBlock[i * 2]].cells[activeBlock[i * 2 + 1]].style.backgroundColor = "";
				}
			}

			//向下移动
			function Down() {
				if(checkBottom()) {
					ease();
					for(var i = 0; i < 4; i++) {
						activeBlock[2 * i] = activeBlock[2 * i] + 1;
					}
					paint();
				} else {
					//停止移动
					clearInterval(timer);
					//标记这些格子已经有值
					updateBoard();

					//继续进行
					createBlock()
					timer = setInterval(Down, 500);
				}

			}

			//更新chessboard数组 
			function updateBoard() {
				for(var i = 0; i < 4; i++) {
					chessboard[activeBlock[2 * i]][activeBlock[2 * i + 1]] = 1;
				}
			}

			//检查是否触底
			function checkBottom() {
				for(var i = 0; i < 4; i++) {
					if(activeBlock[2 * i] == 19) {
						return false;
					}
					if(!isCellValid(activeBlock[2 * i] + 1, activeBlock[2 * i + 1])) {
						return false;
					}
				}
				return true;
			}

			//检查是否合法
			function isCellValid(x, y) {
				if(x > 19 || x < 0 || y > 9 || y < 0) {
					return false;
				}
				if(chessboard[x][y] == 1) {
					return false;
				}
				return true;
			}

			timer = setInterval(Down, 500);
		</script>
	</body>

</html>